<template>
  <div>
    <el-upload
      class="avatar-uploader"
      ref="businessMsgImg"
      style="display: inline-block;"
      action="https://upload.qiniup.com"
      :on-success="handleSuccessbusinessLicenseImg"
      :show-file-list="false"
      :limit="3"
      :data="uploadToken"
      :before-upload="beforeUpload"
      multiple
    >
      <img v-if="showImg" :src="showImg" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      upImg: '',
      showImg:'',
      uploadToken: {
        key: "",
        token: ""
      }
    };
  },
  props: ["queryImg"],
  watch: {
    upImg() {
      // console.log("3333333333")
      // console.log(this.upImg)
      this.showImg=this.upImg  ;
    },
    queryImg() {
      // console.log("3333333333")
      // console.log(this.queryImg)
      this.showImg=this.queryImg  ;
    }
  },
  created() {
  //     this.productImg=this.$store.state.productMsg.productImg
  // console.log("56546546",this.$store.state.productMsg.productImg)
  },
  mounted() {
    this.goodsToken();
    this.showImg=this.queryImg
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 张图片，如需更换，请删除上一张图片在重新选择！`
      );
    },
    handleSuccessbusinessLicenseImg(res, file, fileList) {
     this.upImg= "http://cailanzi.image.cailanzi001.com/" + res.key;
     this.$refs.businessMsgImg.clearFiles()
      // console.log(this.productImg);
      //   this.getproductMsg();
      this.imgfn();
    },
    beforeUpload(file) {
      // console.log("beforeupload");
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      //将上传的文件名保存成key,把这个key拼接到外链地址
      const date = new Date();
      this.uploadToken.key = `bill${date.getFullYear()}${date.getMonth() +
        1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}${Math.floor(
        Math.random() * 100
      )}.${file.type.split("/")[1]}`;
    },

    //获取上传文件时候的token
    goodsToken() {
      this.$store
        .dispatch("purchaseInfo/uptoken", {})
        .then(data => {
          this.uploadToken.token = data.data.uptoken;
        })
        .catch(err => {});
    },
    imgfn() {
      this.$emit("listenEvent", this.upImg);
      // console.log(this.upImg)
      // console.log("1111111111111111");
    }
  }
};
</script>
<style scoped lang='scss'>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>